<!DOCTYPE html>

<html>
<head data-live-domain="jquery.com">
<meta charset="ISO-8859-1">

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
	
<script>

var FracaoControler = {
		
		divisoes:0,
		
		carregaQuadrado:function(wrap){
			FracaoControler.divisoes=0;
			$("#"+wrap).html("");
			
			var txt = "<rect class='shape'  style='fill:yellow;' x='10' y='10' width='210' height='210' /><text font-size='30' class='text1'  style='fill:#333;' x='105' y='120'>1</text>";
			
			$("#"+wrap).append("<svg  height='400' width='400' x='0' y='0' viewBox='0, 0, 400,400' class='main'>"+txt+"</svg>");
			
		},
		carregaQuadradoDividido2:function(wrap){
			FracaoControler.divisoes=2;
			//alert(FracaoControler.divisoes);
			$("#"+wrap).html("");
			var txt1 = "<rect class='shape'  style='fill:green;' x='10' y='10' width='210' height='105' /><text font-size='30' class='text1' x='105' y='62.5'>1/2</text>";
			var txt2 = "<rect class='shape'  style='fill:green;' x='10' y='125' width='210' height='105' /><text font-size='30' class='text1' x='105' y='180'>1/2</text>";
			$("#"+wrap).append("<svg  height='400' width='400' x='0' y='0' viewBox='0, 0, 400,400' class='main'>"+txt1+txt2+"</svg>");
		},
		carregaQuadradoDividido4:function(wrap){
			FracaoControler.divisoes=4;
			//alert(FracaoControler.divisoes);
			$("#"+wrap).html("");
			var txt1 = "<rect class='shape'  style='fill:red;' x='10' y='10' width='105' height='105' /><text font-size='30' class='text1' x='52.5' y='62.5'>1/4</text>";
			var txt2 = "<rect class='shape'  style='fill:red;' x='10' y='125' width='105' height='105' /><text font-size='30' class='text1' x='52.5' y='180'>1/4</text>";
			var txt3 = "<rect class='shape'  style='fill:red;' x='125' y='10' width='105' height='105' /><text font-size='30' class='text1' x='170' y='62.5'>1/4</text>";
			var txt4 = "<rect class='shape'  style='fill:red;' x='125' y='125' width='105' height='105' /><text font-size='30' class='text1' x='170' y='180'>1/4</text>"
			$("#"+wrap).append("<svg  height='400' width='400' x='0' y='0' viewBox='0, 0, 400,400' class='main'>"+txt1+txt2+txt3+txt4+"</svg>");
		},carregaQuadradoDivididoVertical2:function(wrap){
			FracaoControler.divisoes=2;
			$("#"+wrap).html("");
			var txt1 = "<rect class='shape'  style='fill:green;' x='10' y='10' width='105' height='210' /><text font-size='30' class='text1' x='50' y='115'>1/2</text>";
			var txt2 = "<rect class='shape'  style='fill:green;' x='125' y='10' width='105' height='210' /><text font-size='30' class='text1' x='165' y='115'>1/2</text>";
			$("#"+wrap).append("<svg  height='400' width='400' x='0' y='0' viewBox='0, 0, 400,400' class='main'>"+txt1+txt2+"</svg>");
		},
		carregaQuadradoDivididoVertical4:function(wrap){
			FracaoControler.divisoes=4;
			$("#"+wrap).html("");
			var txt1 = "<rect class='shape'  style='fill:red;' x='10' y='10' width='52.5' height='210' /><text font-size='30' class='text1' x='26.5' y='115'>1/4</text>";
			var txt2 = "<rect class='shape'  style='fill:red;' x='72.5' y='10' width='52.5' height='210' /><text font-size='30' class='text1' x='88.75' y='115'>1/4</text>";
			var txt3 = "<rect class='shape'  style='fill:red;' x='135' y='10' width='52.5' height='210' /><text font-size='30' class='text1' x='151.25' y='115'>1/4</text>";
			var txt4 = "<rect class='shape'  style='fill:red;' x='197.5' y='10' width='52.5' height='210' /><text font-size='30' class='text1' x='213.75' y='115'>1/4</text>"
			$("#"+wrap).append("<svg  height='400' width='400' x='0' y='0' viewBox='0, 0, 400,400' class='main'>"+txt1+txt2+txt3+txt4+"</svg>");
		},
		carregaQuadradoDivididoDiagonal2:function(wrap){
			FracaoControler.divisoes=2;
			$("#"+wrap).html("");
			
			var txt1 ="<polygon points=' 10,10 10,210 210,10' style='fill:green;'   style='stroke-width:5;' /><text font-size='30' class='text1' x='52.5' y='115'>1/2</text>";
			var txt2 ="<polygon points=' 20,220 220,220 220,20' style='fill:green;'   style='stroke-width:5;' /><text font-size='30' class='text1' x='177.5' y='115'>1/2</text>";
                 
			$("#"+wrap).append("<svg  height='400' width='400' x='0' y='0' viewBox='0, 0, 400,400' class='main'>"+txt1+txt2+"</svg>");
		},
		carregaQuadradoDivididoDiagonal4:function(wrap){
			FracaoControler.divisoes=4;
			$("#"+wrap).html("");
			
			var txt1 ="<polygon points=' 10,20 105,115 10,220' style='fill:red;'   style='stroke-width:5;' /><text font-size='30' class='text1' x='52.5' y='117.5'>1/4</text>";
			var txt2 ="<polygon points=' 20,10 115,105 220,10' style='fill:red;'   style='stroke-width:5;' /><text font-size='30' class='text1' x='110' y='67.5'>1/4</text>";
			var txt3 ="<polygon points=' 230,20 135,115 230,220' style='fill:red;'   style='stroke-width:5;' /><text font-size='30' class='text1' x='177.5' y='117.5'>1/4</text>";
			var txt4 ="<polygon points=' 20,230 115,135 220,230' style='fill:red;'   style='stroke-width:5;' /><text font-size='30' class='text1' x='110' y='177.5'>1/4</text>";
                 
			$("#"+wrap).append("<svg  height='400' width='400' x='0' y='0' viewBox='0, 0, 400,400' class='main'>"+txt1+txt2+txt3+txt4+"</svg>");
		}
}

$(function(){
	
	FracaoControler.carregaQuadrado("workspace");
	
	$(".dividir").click(function(){
		if(FracaoControler.divisoes===0){
			FracaoControler.carregaQuadradoDividido2("workspace");
		}else if(FracaoControler.divisoes===2){
			FracaoControler.carregaQuadradoDividido4("workspace");
		}
	});
	
	$(".voltar").click(function(){
		if(FracaoControler.divisoes===4) {
			FracaoControler.carregaQuadradoDividido2("workspace");
		}
		else if(FracaoControler.divisoes===2){
			FracaoControler.carregaQuadrado("workspace");
		}
	});
	
	$(".dividir_vertical").click(function(){
		if(FracaoControler.divisoes===0){
			FracaoControler.carregaQuadradoDivididoVertical2("workspace");
		}
		else if(FracaoControler.divisoes===2){
			FracaoControler.carregaQuadradoDivididoVertical4("workspace");
		}
	});
	
	$(".voltar_vert").click(function(){
		if(FracaoControler.divisoes===4) {
			FracaoControler.carregaQuadradoDivididoVertical2("workspace");
		}
		else if(FracaoControler.divisoes===2){
			FracaoControler.carregaQuadrado("workspace");
		}
	});
	
	$(".dividir_diagonal").click(function(){
		if(FracaoControler.divisoes===0){
			FracaoControler.carregaQuadradoDivididoDiagonal2("workspace");
		}
		else if(FracaoControler.divisoes===2){
			FracaoControler.carregaQuadradoDivididoDiagonal4("workspace");
		}
	});
	
	$(".voltar_diag").click(function(){
		if(FracaoControler.divisoes===4) {
			FracaoControler.carregaQuadradoDivididoDiagonal2("workspace");
		}
		else if(FracaoControler.divisoes===2){
			FracaoControler.carregaQuadrado("workspace");
		}
	});
});


</script>
<style>
.text1 {
	fill: #fff;
	font-weight: bold;
}
</style>
</head>
<body>	
<div id="workspace" style="height:240px">
</div>
<button class="dividir btn btn-success">Dividir</button><button class="voltar btn btn-success">Juntar</button><br/><br/>
<button class="dividir_vertical btn btn-warning">Dividir Vertical</button><button class="voltar_vert btn btn-warning">Juntar</button><br/><br/>
<button class="dividir_diagonal btn btn-danger">Dividir Diagonal</button><button class="voltar_diag btn btn-danger">Juntar</button>
</body>
</html>